<template>
  <page-header-wrapper>
    <a-card :bordered="false" class="card_top_padding" style="margin-bottom: 11px">
      <div
        class="table-page-search-wrapper"
        style="margin-top: 15px"
      >
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="3" :sm="24">
              <a-button
                type="primary"
                @click="visiable = true"
                icon="plus"
              >添加轮播图</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        row-key="key"
        size="default"
        :columns="columns"
        :data="loadData"
        ref="table"
      >
        <span slot="pic_url" slot-scope="text, record">
          <img :src="record.pic_url" class="slide-img"/>
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a-button
              type="primary"
              @click="handleEdit(record)"
              size="small"
            >编辑</a-button>
            <a-divider type="vertical" />
            <a-popconfirm
              title="确认删除吗？"
              @confirm="handleDelete(record)"
            >
              <a-button
                type="danger"
                size="small"
              >删除</a-button>
            </a-popconfirm>
          </template>
        </span>
      </s-table>
    </a-card>
    <a-modal
      title="编辑轮播图"
      :width="600"
      :mask-closable="false"
      :destroy-on-close="true"
      v-model="visiable"
      @ok="handleEditSlide()"
      @cancel="$refs.table.refresh(true);slideParam={}"
    >
      <a-form
        :form="form"
      >
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="标题"
        >
          <a-input
            placeholder="标题"
            v-model="slideParam.title"
          />
        </a-form-item>
        <a-form-item
          label="图片"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <storage-select
            placeholder="请选择评论图片"
            v-model="slideParam.pic_url"
            @onOk="onSlideOk">
          </storage-select>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="链接"
        >
          <span>{{ slideParam.page_url }}</span>
          <a-divider type="vertical" v-if="slideParam.page_url"/>
          <a-button @click="showLink=true">选择</a-button>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="排序"
        >
          <a-input-number v-model="slideParam.sort" id="inputNumber" :min="1"/>
        </a-form-item>
      </a-form>
    </a-modal>
    <select-link v-model="showLink" @onOk="onOk"></select-link>
  </page-header-wrapper>
</template>

<script>
import { STable, SelectLink } from '@/components'
import { slideList, slideDelete, slideEdit } from '@/api/saas/slide'

const columns = [
  {
    title: '图片标题',
    dataIndex: 'title'
  },
  {
    title: '页面地址',
    dataIndex: 'page_url'
  },
  {
    title: '图片',
    dataIndex: 'pic_url',
    scopedSlots: { customRender: 'pic_url' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'BargainSlide',
  components: {
    SelectLink,
    STable
  },
  data () {
    return {
      showLink: false,
      visiable: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      form: this.$form.createForm(this),
      // 表头
      columns,
      // 权限树
      permissionTree: [],
      modalLoading: false,
      defaultCheckedKeys: [],
      // 查询条件参数
      queryParam: {},
      slideParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        Object.assign(parameter, this.queryParam)
        return slideList(parameter).then(res => {
          return res.data
        })
      }
    }
  },
  created () {
  },
  methods: {
    handleDelete: function (record) {
      const hide = this.$message.loading('删除中...', 0)
      slideDelete({
        id: record.id
      }).then(res => {
        hide()
        if (res.code === 0) {
          this.$message.success('轮播图删除成功')
          this.$refs.table.refresh()
        } else {
          this.$error({
            content: res.msg
          })
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    handleEdit: function (record) {
      this.visiable = true
      this.slideParam = record
    },
    handleEditSlide: function () {
      const hide = this.$message.loading('保存中...', 0)
      slideEdit(this.slideParam).then(res => {
        hide()
        if (res.code === 0) {
          this.$message.success('保存成功')
          this.visiable = false
          this.$refs.table.refresh()
        } else {
          this.$error({
            content: res.msg
          })
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
      this.slideParam = {}
    },
    onSlideOk: function (val) {
      this.slideParam.pic_url = val
    },
    selectLink () {
      this.showLink = true
    },
    onOk (e) {
      this.slideParam.page_url = e.link
    }
  }
}
</script>

<style scoped>
.slide-img {
  height: 50px;
  width: auto;
}
</style>
